<script lang='ts' setup> import { Api } from '@/api/model/url' import { useCommonStore } from '@/stores/modules/common' const config = useRuntimeConfig() const { apiBaseSiteUrl } = config.public const route = useRoute() const detail = ref<any>({}) const tabValue = ref('blog') const isHasCatalogue = ref(true) const options = ref([ { label: 'Read Blog', value: 'blog', }, { label: 'Preview Catalog', value: 'catalog', }, ]) const slug = route.params.slug const { data, pending, error, refresh } = await useAsyncData( 'blog-detail', () => $fetch(`${apiBaseSiteUrl}${Api.BlogDetail}`, { params: { slug } }), ) const seoData = data.value?.result // 把createTime和updateTime转换为ISO格式 if (seoData?.createTime) seoData.createTime = new Date(seoData.createTime).toISOString() if (seoData?.updateTime) seoData.updateTime = new Date(seoData.updateTime).toISOString() if (!seoData?.relatedCatalogue) isHasCatalogue.value = false detail.value = seoData useHead({ title: detail.value?.metaTitle, meta: [ { name: 'description', content: detail.value?.metaDescribe, }, { property: 'og:title', content: detail.value?.metaTitle, }, { property: 'og:description', content: detail.value?.metaDescribe, }, { property: 'og:image', content: detail.value?.thumbnailUrl, }, { property: 'og:url', content: `${apiBaseSiteUrl}/blog/${slug}`, }, { property: 'og:type', content: 'website', }, { property: 'twitter:title', content: detail.value?.metaTitle, }, { property: 'twitter:description', content: detail.value?.metaDescribe, }, { property: 'twitter:site', content: `${apiBaseSiteUrl}/blog/${slug}`, }, { property: 'twitter:image', content: detail.value?.thumbnailUrl, }, { property: 'twitter:card', content: 'summary_large_image', }, ], script: [ // JSON-LD { type: 'application/ld+json', children: JSON.stringify({ datePublished: detail.value?.createTime, dateModified: detail.value?.updateTime, }), }, ], link: [ { rel: 'canonical', href: `${apiBaseSiteUrl}/blog/${slug}`, }, ], }) const { openLoginAndDownloadModal } = useLoginAndDownLoadModal() async function clickLoginAndDownload(item: any) { try { const commonStore = useCommonStore() commonStore.setDownloadCatalog(item) const { status } = await openLoginAndDownloadModal() if (status) location.reload() } catch (error) { console.log(error) } } </script> <template> <div class="blog-detail"> <div class="bg-#F3F4FB "> <div class="pt-175px pb-110px w-1200-auto flex px-60px"> <img :src="detail?.thumbnailUrl" :alt="detail?.thumbnailAlt" srcset="" class="w-410px h-256px b-rd-10px object-cover mr-40px"> <div class="flex-1 text-left"> <div class="b-rd-400px left-10px text-center w-138px h-32px lh-32px bg-#fff/50 backdrop-blur-20px b-1px b-solid b-#fff/60 text-#9B6CFF text-14px mb-20px"> {{ detail.category_dictText }} </div> <h1 class="!mb-20px fw-800 text-40px ls-2 text-#333 line-clamp-2 lh-50px custom-title-font" > {{ detail.contentTitle }} </h1> <div class="text-16px text-#999 lh-24px"> {{ detail.contentSubhead }} </div> </div> </div> </div> <div class="w-1200-auto flex pt-30px"> <div class="w-840px mr-60px"> <div v-if="isHasCatalogue"> <el-segmented v-model="tabValue" :options="options"> <template #default="scope"> <div> <div>{{ scope.item.label }}</div> </div> </template> </el-segmented> </div> <div v-show="tabValue === 'blog'" class="mt-30px content-detail custom-html" v-html="detail.content" /> <div v-show="tabValue === 'catalog'" class="mt-30px"> <iframe :src="`${detail?.relatedCatalogue?.viewPdf}#view=FitH&toolbar=0&scrollbar=0&navpanes=0`" allowfullscreen width="100%" height="1200px" style="border: none" > 您的浏览器不支持iframe,请使用现代浏览器查看PDF。 </iframe> </div> </div> <div class="flex-1"> <div v-if="isHasCatalogue" class="pos-relative mb-40px"> <img :src="detail?.relatedCatalogue?.coverImg" :alt="detail?.relatedCatalogue?.coverAlt" srcset="" class="w-375px h-240px b-rd-10px object-cover"> <h4 class="!mb-15px !mt-30px fw-800 text-24px text-#333 line-clamp-2" > {{ detail?.relatedCatalogue?.title }} </h4> <div class="text-14px text-#999 lh-22px line-clamp-2 mb-20px"> {{ detail?.relatedCatalogue?.subhead }} </div> <el-button class="!bg-#9B6CFF !text-#fff !b-#9B6CFF !b-rd-380px text-14px fw-bold !h-32px px-20px" @click="clickLoginAndDownload(detail?.relatedCatalogue)"> Download Catalog </el-button> </div> <div class="px-40px pt-34px bg-#E7EAFF b-rd-10px text-center custom-main"> <div class="text-#333 fw-500"> Contact Us to Get </div> <div class="text-#333 fw-500 my-6px"> Exclusive Trending Products </div> <div class="text-#333 fw-500"> Solutions </div> <el-button class="mt-20px !bg-#fff !text-#9B6CFF !w-160px !h-40px !b-0px !b-rd-200px" round> <nuxt-link :to="{ name: 'contact' }"> Contact Us </nuxt-link> </el-button> </div> </div> </div> <common-block-blog class="!pb-0" /> <AppFooter /> </div> </template> <style lang='less' scoped> .el-segmented { --el-segmented-item-selected-color: #fff; --el-segmented-item-selected-bg-color: #9B6CFF; --el-border-radius-base: 16px; --el-segmented-bg-color: #F9FAFB; --el-segmented-color: #333; width: 100%; height: 68px; line-height: 68px; border-radius: 300px!important; overflow: hidden; padding: 0; ::v-deep .el-segmented__group { .el-segmented__item-selected,.el-segmented__item{ border-radius: 300px!important; overflow: hidden; .el-segmented__item-label{ font-size: 18px; } } } } .blog-detail { ::v-deep(.content-detail) { font-family: sans-serif; h2 { font-size: 1.5em; font-family: "CustomTitleFont"; margin-top: 1em !important; margin-bottom: 1em !important; font-weight: bold; } h3 { display: block; font-size: 1.17em; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; margin-bottom: 1em !important; font-weight: bold; unicode-bidi: isolate; font-family: "CustomTitleFont"; } p { display: block; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; unicode-bidi: isolate; } ul { display: block; list-style-type: disc; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 40px; unicode-bidi: isolate; li { display: list-item; text-align: -webkit-match-parent; unicode-bidi: isolate; } } ol { list-style-type: decimal; display: block; list-style-type: decimal; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 40px; unicode-bidi: isolate; } } } .custom-main{ background: url('~/assets/images/swiper_bg.png') no-repeat center center; background-size: cover; width: 300px; height: 190px; } </style>